<template>
  <div>
    <a-input v-model="sqlConfig.sqlName" :placeholder="$t('m.eform.apptable.placeholder.sqlName')" @click="selectSqlConfig" readOnly>
      <ych-icon slot="addonAfter" type="setting"/>
    </a-input>

    <a-badge v-if="showParameter && !!sqlConfig.sqlName" :dot="showDot">
      <a-button type="link" size="small" @click="sqlParameterInput">{{ $t('m.eform.formDesign.label.chu-can-pei-zhi') }}</a-button>
    </a-badge>
    <sql-parameter-dialog ref="sqlParameterDialog" @selectFinished="sqlParameterOk" :hiddenOutKey="hiddenOutKey"></sql-parameter-dialog>

    <select-sql-config-dialog ref="selectSqlConfigDialog" @selectFinished="selectFinished" :groupId="groupId"></select-sql-config-dialog>
  </div>
</template>

<script>

import SelectSqlConfigDialog from '../../select/dialog/SelectSqlConfigDialog';
import SqlParameterDialog from './SqlParameterDialog'

export default {
  name: "SqlConfigSetting",
  props: {
    sqlConfig: Object,
    groupId: {
      type: String,
      required: true
    },
    showParameter: Boolean,
    hiddenOutKey: Boolean,
  },
  components: {
    SelectSqlConfigDialog,
    SqlParameterDialog,
  },
  data() {
    return {}
  },
  computed: {
    showDot() {
      return this.sqlConfig.sqlParameterConfig && this.sqlConfig.sqlParameterConfig.length > 0
    }
  },
  methods: {
    selectSqlConfig() {
      this.$refs.selectSqlConfigDialog.radio = true;
      this.$refs.selectSqlConfigDialog.visible = true;
    },
    selectFinished(selectedRowKeys, selectionRows) {
      let sqlConfig;
      if (selectionRows) {
        sqlConfig = {
          sqlCode: selectionRows[0].sqlCode,
          sqlName: selectionRows[0].sqlName,
          sqlParameterConfig: this.sqlConfig.sqlParameterConfig || []
        }
      } else {
        sqlConfig = {}
      }
      this.$emit("input", sqlConfig);
    },
    sqlParameterInput() {
      this.$refs.sqlParameterDialog.open(this.sqlConfig.sqlParameterConfig ? JSON.stringify(this.sqlConfig.sqlParameterConfig) : null)
    },
    sqlParameterOk(json) {
      this.sqlConfig.sqlParameterConfig = JSON.parse(json)
    },
  }
}
</script>
